<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card class="box-card">
        <div class="an-box" @click="toUrl">
          <div class="an-ico bg01">
            <i class="el-icon-s-promotion"></i>
          </div>
          <div class="an-text">
            <div class="an-title">{{infoData.deliveredNumber || 0}}</div>
            <div class="an-span">待发货订单</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="box-card">
        <div class="an-box">
          <div class="an-ico bg02">
            <i class="el-icon-s-marketing"></i>
          </div>
          <div class="an-text">
            <div class="an-title">{{infoData.totalMoney || 0}}</div>
            <div class="an-span">当日总销售金额</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="box-card">
        <div class="an-box">
          <div class="an-ico bg03">
            <i class="el-icon-s-order"></i>
          </div>
          <div class="an-text">
            <div class="an-title">{{infoData.orderNumber || 0}}</div>
            <div class="an-span">当日订单数</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="box-card">
        <div class="an-box">
          <div class="an-ico bg04">
            <i class="el-icon-message-solid"></i>
          </div>
          <div class="an-text">
            <div class="an-title">{{infoData.stockNumber || 0}}</div>
            <div class="an-span">缺货商品数</div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
export default class statistics extends Vue {
  [x: string]: any;
  data() {
    return {
      infoData: {},
    };
  }

  created() {
    this.getData();
  }

  getData() {
    this.API.statisticsSale().then((res: any) => {
      this.infoData = res;
    });
  }

  // 跳转至待发货订单
  toUrl() {
    this.$router.push({ path: "/order", query: { tab: 2 } });
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/mixin.scss";
.an-box {
  display: flex;
  .an-ico {
    width: 80px;
    height: 80px;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-color: #ddeedd;
    border-radius: 50%;
    margin-right: 15px;
    &.bg01 {
      color: $color-Danger;
    }
    &.bg02 {
      color: $color-Warning;
    }
    &.bg03 {
      color: $color-Success;
    }
    &.bg04 {
      color: $color-Blue;
    }
  }
  .an-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .an-title {
      font-size: 24px;
      font-weight: bold;
    }
    .an-span {
      color: $color-text3;
    }
  }
}
</style>